<!DOCTYPE html>
<style>
input.red::-webkit-input-placeholder {
    color: rgb(100, 0, 0);
}

.blue::placeholder {
    color: blue;
}

.prefixed-unprefixed::-webkit-input-placeholder {
    color: red;
}
.prefixed-unprefixed::placeholder {
    color: blue;
}

.unprefixed-prefixed::placeholder {
    color: blue;
}
.unprefixed-prefixed::-webkit-input-placeholder {
    color: red;
}
</style>
This tests that you can set the placeholder text color.

<div>
Default style:
<input placeholder="default">
<input placeholder="default disabled">
</div>

<div>
::-webkit-input-placeholder:
<input class="red" placeholder="text">
<input class="red" type="search" placeholder="search">
<input class="red" type="password" placeholder="password">
<input class="red" disabled placeholder="disabled text">
</div>

<div>
::placeholder:
<input class="blue" placeholder="text">
<input class="blue" type="search" placeholder="search">
<input class="blue" type="password" placeholder="password">
<input class="blue" disabled placeholder="disabled text">
</div>

<div>
Both:
<input class="prefixed-unprefixed" placeholder="unprefixed">
<input class="unprefixed-prefixed" placeholder="prefixed">
</div>
